<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" href="bast/plugins/layui-v2.4.3/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="bast/css/login.css" />
		<link rel="stylesheet" type="text/css" href="bast/plugins/buttonCaptcha/jquery.buttonCaptcha.styles.css"/>
		<link rel="stylesheet" type="text/css" href="bast/plugins/jquery-ui/jquery-ui.min.css"/>
	</head>
	<body>
		<div id="main">
			<form class="layui-form" action="javascript:void(0)" method="post">
				<div>
					<h3>后台登录</h3></div>
				<div class="center">
					<input id="account" type="text" class="layui-input" lay-verify="required"  name="account" placeholder="请输入您的账号" />
				</div>
				<div class="center">
					<input id="password" type="password" class="layui-input" lay-verify="required" name="password" placeholder="请输入您的密码" />
				</div>
				<div>
					<div class="center left">
						<label class="layui-form-label">记住密码？</label>
						<div class="layui-input-block">
							<input id="remember" type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
						</div>
						<div>
							 <button lay-submit class="layui-btn  layui-col-md-offset1 layui-btn-primary login" lay-filter="login">登录<tton>
						</div>
					</div>
			</form>
			</div>
			<script src="bast/js/jquery-1.11.3.min.js"></script>
			<script src="bast/plugins/layui-v2.4.3/layui/layui.js"></script>
				<script src="bast/plugins/buttonCaptcha/jquery.buttonCaptcha.js"></script>
				<script src="bast/plugins/jquery-ui/jquery-ui.min.js"></script>
			<script type="text/javascript">
				layui.use(['form'], function() {
					var form = layui.form;
					form.render();
				form.on('submit(login)',function(){
					if($("#remember").is(":checked")){
						var account = $("#account").val();
						var password = $("#password").val();
						localStorage.setItem("account",account);
						localStorage.setItem("password",password);
					}else{
							localStorage.setItem("account","");
						localStorage.setItem("password","");
					}
					
				});
				function remember(){
					if(localStorage.getItem("account")!=""&&localStorage.getItem("password")!=""){
						$("#account").val(localStorage.getItem("account"));
							$("#password").val(localStorage.getItem("password"));
							$("#remember").prop("checked",true);
					}
					form.render();
				}
				remember();
				
				function addUnlock(){
					var engLish =["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
					var attr=[];
					var code ="";
					for(var i=0;i<4;i++){
					var ranNum = Math.ceil(Math.random() * 25); 
					if(attr.indexOf(ranNum)==-1){
						attr.push(ranNum);
					}else{
						i--;
					}
				console.log(attr);
					
					}
					console.log(attr);
					for(var i=0;i<4;i++){
							code+=engLish[attr[i]];
							console.log(engLish[attr[i]]);
					}
					$(".captcha_gbws_wrap").remove();
					$(".login").buttonCaptcha({
						codeWord:code,
						codeZone:code,
						captchaHeader:"请正确移动到滑动块",
						capchaUnlocked:"通过验证"
						
					});
				$(".captcha_gbws_wrap").appendTo("#verifyGroup");
				}
				  addUnlock();
				});
			</script>
	</body>

</html>
